import React from 'react';
import { Tooltip } from 'antd';

// 为强制刷新浏览器缓存添加版本号
const VERSION = new Date().getTime();

// 交通方式选项定义为常量，用于所有组件
export const TRANSPORT_MODES = [
  { value: 'driving', label: '驾车', key: 'driving-' + VERSION },
  { value: 'transit', label: '公共交通', key: 'transit-' + VERSION },
  { value: 'walking', label: '步行', key: 'walking-' + VERSION },
  { value: 'bicycling', label: '自行车', key: 'bicycling-' + VERSION }
];

/**
 * 自定义步行图标组件
 * 提供更多自定义选项和多种大小
 */
export const WalkIcon: React.FC<{ 
  style?: React.CSSProperties; 
  size?: 'small' | 'default' | 'large'; 
  color?: string;
  withTooltip?: boolean;
}> = ({ style, size = 'default', color = '#52c41a', withTooltip = true }) => {
  // 根据大小调整字体大小
  const sizeMap = {
    small: '14px',
    default: '16px',
    large: '20px'
  };
  
  const defaultStyle: React.CSSProperties = {
    color: color,
    fontSize: sizeMap[size],
    display: 'inline-flex',
    alignItems: 'center',
    justifyContent: 'center',
    ...style
  };
  
  const iconElement = (
    <span style={defaultStyle} role="img" className="anticon">
      <svg viewBox="0 0 24 24" focusable="false" fill="currentColor" width="1em" height="1em">
        <path d="M13.5 5.5c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zM9.8 8.9L7 23h2.1l1.8-8 2.1 2v6h2v-7.5l-2.1-2 .6-3C14.8 12 16.8 13 19 13v-2c-1.9 0-3.5-1-4.3-2.4l-1-1.6c-.4-.6-1-1-1.7-1-.3 0-.5.1-.8.1L6 8.3V13h2V9.6l1.8-.7" />
      </svg>
    </span>
  );
  
  if (withTooltip) {
    return (
      <Tooltip title="步行">
        {iconElement}
      </Tooltip>
    );
  }
  
  return iconElement;
};

/**
 * 获取交通模式对应的图标URL - 用于地图标记
 */
export const getTransportModeIconUrl = (mode: string): string => {
  switch(mode) {
    case 'walking':
      return 'https://webapi.amap.com/theme/v1.3/markers/n/walk.png';
    case 'bicycling':
      return 'https://webapi.amap.com/theme/v1.3/markers/n/bike.png';
    case 'transit':
      return 'https://webapi.amap.com/theme/v1.3/markers/n/bus.png';
    case 'driving':
    default:
      return 'https://webapi.amap.com/theme/v1.3/markers/n/car.png';
  }
};